<template>
  <div class="app">
    <div class="contenet">
      <div></div>
      <div></div>
      <div></div>
    </div>
    <h1>后台管理系统</h1>
    <el-button type="success" @click="handle" :icon="Edit">
      hello world
    </el-button>
    <div class="demo-pagination-block">
      <div class="demonstration">All combined</div>
    </div>
  </div>
  <el-pagination
    :page-sizes="[100, 200, 300, 400]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="400"
  />
</template>

<script setup lang="ts">
import { Edit } from '@element-plus/icons-vue'
const handle = () => {
  console.log('测试')
}
</script>

<style lang="scss" scoped>
.app {
  width: 90vw;
  height: 500px;
  background-color: #f16666;

  .contenet {
    height: 200px;
    width: 70vw;
    border: 1px solid aqua;
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    div {
      flex: 1;
      margin: 0 30px;
      height: 150px;
      background-color: #29e4f5;
    }
  }

  h1 {
    color: #fff;
  }
}
</style>
